<template>
	<view class="all">
		<!-- 导航栏 -->
		<view class="top">
			<view style="display: flex;position: relative;">
				<view class="search">
					<input type="text" v-model="query.keywords" placeholder="请输入内容"
						placeholder-style="color:#999;font-size:13px;" />
					<icon class="searchIcon" @click="getOrderList" type="search" size="26upx"></icon>
				</view>
				<button type="primary" @click="searchFn" size="mini">筛选</button>
				<view class="search-container" v-show="searchDrawer">
					<view class="search_box">
						<uni-list class="center-list">
							<uni-list-item :showArrow="true" title="时间">
								<!-- 自定义 footer-->
								<template slot="footer">
									<view class="item-footer" style="width:70%">
										<uni-datetime-picker v-model="query.times" type="daterange"
											rangeSeparator="至" />
									</view>
								</template>
							</uni-list-item>
							<uni-list-item :showArrow="true" title="类型">
								<!-- 自定义 footer-->
								<template slot="footer">
									<view class="item-footer" style="width:70%">
										<uni-data-checkbox v-model="query.types" multiple :localdata="typeList" />
									</view>
								</template>
							</uni-list-item>
						</uni-list>
						<view class="btn">
							<button type="default" class="reset" @click="searchFn">取消</button>
							<button type="default" class="reset" @click="searchFn">重置</button>
							<button type="default" class="save" @click="doSearch()">搜索</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="allOrder">
			<!-- v-if="listData.length>0" -->
			<view class="list-content">
				<div class="nextPage" @click="nextPage" v-if="getMemberWechatLog.length>0" v-show="isShow">查看更多数据</div>
				<wechatModule ref="wechatModule" :getMemberWechatLog='getMemberWechatLog' :parent="_self">
				</wechatModule>
			</view>
			<!-- <van-empty v-else description="暂无记录" /> -->
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	import wechatModule from './wechat-module/wechat-module.vue';
	import dictionary from '@/utils/dictionary.js';
	import titleFix from "@/utils/titleFix";
	import stepsCreate from '@/component/steps-create/steps-create.vue';
	import sun from '@/utils/sun.js';
	const query = {
		times: [],
		keywords: "",
		types: [],
		friend_id: "",
		wx_id: "",
		page: 1,
		limit: 15,
		total: 0
	};

	export default {
		name: "ykrecord",
		mixins: [titleFix],
		components: {
			wechatModule,
		},
		data() {
			return {
				query: Object.assign({}, query), // 搜索条件
				user: '', //个人信息
				listData: [], //订单列表
				searchDrawer: false,
				typeList: [{
					text: '语音消息',
					value: 3
				}, {
					text: '语音通话',
					value: 6
				}, {
					text: '视频通话',
					value: 7
				}, {
					text: '文件',
					value: 9
				}, {
					text: '小程序名片',
					value: 18
				}, {
					text: '链接',
					value: 10
				}],
				info: {

				},
				page: 1,
				total: 0,
				limit: 20,
				getMemberWechatLog: {},
				isShow: true
			};
		},

		beforeMount() {
			this.dictionary = dictionary;
		},
		watch: {

		},
		onLoad(options) {
			this.info = options
			this.query.friend_id = this.info.friendId;
			this.query.wx_id = this.info.wxId
			this.$nextTick(() => {
				this.geWechatLog()
			});
		},
		onReachBottom() {
			console.log(++this.query.page)

		},
		onPullDownRefresh() {
			console.log(++this.query.page)
		},
		methods: {
			nextPage() {
				++this.page;
				this.geWechatLog();

			},
			searchFn() {
				this.searchDrawer = !this.searchDrawer
				// this.query = Object.assign({}, query);
			},
			geWechatLog() {
				let _this = this;
				let params = {
					...this.query,
					page: _this.page,
					limit: 20,
				};
				request.request({
					url: '/api/customer.member/getMemberWechatLog',
					showLoading: true,
					token: true,
					data: params,
					success(res) {
						if (res.code == 200) {
							let data = res.data.data;
							if (data.length > 0) {
								_this.loading = false;
								_this.getMemberWechatLog = data.concat(_this.getMemberWechatLog)
								_this.getMemberWechatLog = _this.getMemberWechatLog.map(item => {
									return {
										...item,
										musicShow: true // Set the initial value of musicShow to false
									}
								});
							} else {
								_this.isShow = false
							}

						}
					},
					fail(e) {
						uni.showToast({
							icon: 'none',
							title: '服务器开小差去啦~'
						});
					}
				});
			},
			doSearch() {
				this.getMemberWechatLog = []
				this.page = 1;
				this.isShow = true;
				this.query.friend_id = this.info.friendId;
				this.query.wx_id = this.info.wxId
				this.$nextTick(() => {
					this.geWechatLog()
				});
				this.searchDrawer = !this.searchDrawer
			},
		}
	};
</script>

<style lang="less" scoped>
	page {

		background: #f4f4f4;
		padding-top: 0;

		/deep/.search-container .uni-date-x--border {

			border: none !important;

		}

		/deep/ .uni-tag {
			font-weight: 500;
		}

		/deep/ .uni-drawer--right {
			-webkit-transform: translate3d(0, 0, 0);
			-moz-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		/deep/ .uni-date__x-input {
			height: 20px !important;
			padding: 0;
		}

		/deep/.uniui-calendar:before {
			display: none;
		}

		/deep/.uni-picker-container,
		.uni-list-item {
			font-size: 14px;
		}

		// /deep/.uni-list-item__container {
		//     overflow: inherit;
		// }

		/deep/ .uni-date-editor--x .uni-date__icon-clear {
			top: -8px;
			right: -15px;
		}

		/deep/.uni-input-input {
			line-height: 20px
		}
	}

	.get-new-list {
		padding: 5px;
		overflow: hidden;
		margin-bottom: 10px;
		text-align: right;
		margin-right: 18px;

		.tag-list {
			margin-right: 2px;
			margin-bottom: 2px;
		}
	}

	.btn {
		width: 100%;
		height: 73upx;
		bottom: 33upx;
		display: flex;
		justify-content: center;
		margin-bottom: 15px;

		button {
			width: 214upx;
			height: 73upx;
			line-height: 73upx;
			font-size: 28upx;
			margin: 15px auto;
		}

		.reset {
			color: #406ceb;
			border: 1px solid rgba(64, 108, 235, 1);
			background: #ffffff;
		}

		.save {
			background: #406ceb;
			color: #ffffff;
		}
	}

	.list-header {
		margin-top: 5px;
		;
	}

	.search_box {
		margin-bottom: 10px;
		background: white;
		padding-bottom: 10px;

		.item-footer {
			position: relative;
			text-align: right;
			display: block;
			width: 229px;
			font-size: 24upx;
			color: #666666;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

			.tag {
				display: inline-block;
				padding: 1px 4px;
				position: relative;
				margin-right: 2px;

				::after {
					content: '';
					width: 1px;
					height: 10px;
					background: #a08989;
					position: absolute;
					top: 4px;
					right: -2px
				}

				// .tag:after{
				//     width: 1px;
				//     height: 1px;
				//     background: red;
				//     position: absolute;
				//     right: 0;
				//     top:0
				// }
			}

			.clearIcon {
				position: absolute;
				right: -20px;
				top: 3px;
			}
		}

		.search_content {
			padding: 10px;

		}
	}

	.top {
		width: 100%;
		// height: 150upx;
		background: #ffffff;
		padding: 10upx 0 10upx 19upx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;

		.left {
			width: 50upx;
			height: 58upx;
			display: flex;
			align-items: center;
			float: left;

			image {
				width: 40upx;
				height: 40upx;
			}
		}

		.search {
			position: relative;
			width: 576upx;
			height: 58upx;
			margin-left: 10upx;
			float: left;

			input {
				width: 576upx;
				height: 58upx;
				background: rgba(255, 255, 255, 1);
				border: 1upx solid rgba(238, 238, 238, 1);
				border-radius: 10upx;
				padding-left: 1rem;
				box-sizing: border-box;
			}

			.searchIcon {
				position: absolute;
				right: 1rem;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.screen {
			width: 55upx;
			height: 58upx;
			font-size: 26upx;
			color: #406ceb;
			margin-left: 10upx;
			line-height: 58upx;
		}
	}


	.allOrder {
		width: 100%;
		height: 100%;
		box-sizing: border-box;

		.list-content {
			margin-top: 50px;
			background-color: #fff;
		}
	}

	.image {
		image {
			width: 200upx;
			height: 200upx;
			position: absolute;
			right: -40upx;
			top: -40upx;
			z-index: 5;
			animation-name: mychange;
			animation-duration: 500ms;
		}
	}

	@keyframes mychange {
		0% {
			position: absolute;
			right: -20upx;
			top: -20upx;
			z-index: 5;
			transform: scale(1.3);
		}

		50% {
			position: absolute;
			right: -20upx;
			top: -20upx;
			z-index: 5;
			transform: scale(1.3);
		}

		100% {
			position: absolute;
			right: -40upx;
			top: -40upx;
			z-index: 5;
			transform: scale(1);
		}
	}

	.allOrder .orderBox .info {
		display: flex;
		padding: 8px 12px;
		flex-wrap: wrap;
		border-bottom: 1upx solid #eeeeee;

		.con {
			width: 50%;
			height: 45upx;
			line-height: 45upx;
			display: flex;
			align-items: center;

			.txt1 {
				position: relative;
				flex: 0 4rem;
				font-size: 24upx;
				color: #666666;
			}

			.txt1::after {
				position: absolute;
				content: ":";
				right: 8px;
			}

			.txt2 {
				flex: 1;
				font-size: 24upx;
				color: #666666;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}

	// 筛选框
	.searchDrawer {
		margin: 0;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: auto;
		z-index: 993;

	}

	.content {
		background: #f3f7fa;
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.search_list {
			margin-top: 10upx;
			padding: 10px;

			.search_title {
				width: 100%;
				font-size: 26upx;
				color: #000;
				font-weight: 500;
				font-family: PingFang SC;
				padding: 20upx 24upx;
				box-sizing: border-box;
				display: block;
				font-weight: 600;

			}

			.search_type {
				box-sizing: border-box;
				display: flex;
				justify-content: left;
				flex-wrap: wrap;

				.view_box {
					width: 154upx;
					height: 66upx;
					display: flex;
					justify-content: center;
					align-items: center;

					margin-top: 16upx;
					margin-right: 16upx;
					font-size: 24upx;
					white-space: wrap;
					color: #666666;
					background: #f6f6f6;
					border-radius: 5px;
					border: 1upx solid #f6f6f6;

					text {
						text-align: center;
					}
				}

				//选中状态
				.actived {
					background: #eef2ff !important;
					border: 1upx solid #406ceb;
					color: #406ceb !important;
				}
			}
		}

		.scroll_height {
			height: calc(100vh - 300px);
			overflow: auto;
		}
	}

	.search-container {
		position: fixed;
		top: 40px;
		left: 0;
		right: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 999;
	}

	.nextPage {
		max-width: 100%;
		padding: 10px 0;
		position: fixed;
		font-size: 12px;
		text-align: center;
		width: 100%;
		color: #000000d9;
		cursor: pointer;
		top: 40px;
		left: 0;
		right: 0;
		z-index: 9;
		background-color: #f1f1f1b3;
	}
</style>
